{% extends "base.html" %}

{% block title %}切片实验室{% endblock %}

{% block extra_css %}
<style>
    .page-header {
        margin-bottom: 2rem;
    }
    
    .upload-container {
        background-color: var(--card-bg);
        border-radius: 6px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        padding: 0.8rem;
        margin-bottom: 1rem;
        margin-top: 0.5rem;
    }
    
    .documents-list {
        background-color: var(--card-bg);
        border-radius: 6px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        padding: 2rem;
    }
    
    .drop-zone {
        border: 2px dashed var(--border-color);
        border-radius: 6px;
        padding: 1.3rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .drop-zone-active {
        border-color: var(--accent);
        background-color: rgba(52, 152, 219, 0.05);
    }
    
    .drop-zone-icon {
        font-size: 2rem;
        color: var(--accent);
        margin-bottom: 0.6rem;
    }
    
    .document-item {
        border-bottom: 1px solid rgba(0,0,0,0.05);
        padding: 1rem 0;
    }
    
    .document-item:last-child {
        border-bottom: none;
    }
    
    .document-name {
        font-weight: bold;
        color: var(--text-color);
    }
    
    .document-meta {
        font-size: 0.85rem;
        color: var(--text-muted);
        margin-top: 0.25rem;
    }
    
    .document-status {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        border-radius: 50px;
        font-size: 0.75rem;
        font-weight: 600;
        background-color: var(--light-bg);
    }
    
    .status-chunked {
        background-color: rgba(41, 128, 185, 0.1);
        color: #2980b9;
    }
    
    .status-processing {
        background-color: rgba(52, 152, 219, 0.1);
        color: #3498db;
    }
    
    .status-pending {
        background-color: rgba(189, 195, 199, 0.1);
        color: #7f8c8d;
    }
    
    .action-buttons .btn {
        margin-left: 0.5rem;
    }
    
    .progress-container {
        margin-top: 20px;
        display: none;
    }
    
    .upload-status {
        margin-top: 5px;
        font-size: 14px;
        color: var(--text-muted);
    }
    
    h2, h4 {
        color: var(--primary-color);
    }
    
    @media (max-width: 992px) {
        .document-item .row > div {
            margin-bottom: 0.5rem;
        }
        
        .action-buttons {
            text-align: left !important;
        }
        
        .action-buttons .btn {
            margin-left: 0;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="page-header d-flex justify-content-between align-items-center">
            <h3>切片实验室</h3>
            <div class="d-flex align-items-center">
                <a href="/" class="btn btn-outline-primary">
                    <i class="fas fa-arrow-left me-2"></i>返回首页
                </a>
            </div>
        </div>
        
        <div class="upload-container">
            <h4 class="mb-3">上传文档</h4>
            <form id="uploadForm" enctype="multipart/form-data">
                <div id="dropZone" class="drop-zone">
                    <div class="drop-zone-icon">
                        <i class="fas fa-cloud-upload-alt"></i>
                    </div>
                    <div class="fs-5 mb-1">拖拽文件到此处或点击选择文件</div>
                    <div class="text-muted small mb-2">支持格式: {{ allowed_extensions }}</div>
                    <button type="button" id="browseButton" class="btn btn-primary">
                        <i class="fas fa-folder-open me-2"></i>浏览文件
                    </button>
                    <input type="file" id="fileInput" style="display: none">
                </div>
                
                <div class="progress-container" id="progressContainer">
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" 
                             id="uploadProgress" role="progressbar" 
                             aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" 
                             style="width: 0%">0%</div>
                    </div>
                    <div class="upload-status" id="uploadStatus">准备上传...</div>
                </div>
            </form>
        </div>
        
        <div class="documents-list">
            <h4 class="mb-4">文档列表</h4>
            
            {% if documents %}
                <div class="documents-container">
                    {% for document in documents %}
                    <div class="document-item">
                        <div class="row align-items-center">
                            <div class="col-lg-6">
                                <div class="document-name">{{ document.filename }}</div>
                                <div class="document-meta">
                                    上传时间: {{ document.upload_time.strftime('%Y-%m-%d %H:%M:%S') }}
                                    <span class="mx-2">|</span>
                                    大小: {{ '%0.2f'|format(document.filesize/1024) }} KB
                                    <span class="mx-2">|</span>
                                    <span class="document-status {% if document.status == '已切块' %}status-chunked{% elif document.status == '处理中' %}status-processing{% else %}status-pending{% endif %}">
                                        {{ document.status }}
                                    </span>
                                </div>
                            </div>
                            <div class="col-lg-6 text-end action-buttons">
                                <a href="/chunklab/documents/{{ document.id }}/chunk" class="btn btn-primary btn-sm">
                                    <i class="fas fa-cut me-1"></i>切块/查看
                                </a>
                                <button type="button" class="btn btn-danger btn-sm" 
                                        onclick="confirmDelete('/chunklab/documents/{{ document.id }}', '{{ document.filename }}')">
                                    <i class="fas fa-trash-alt me-1"></i>删除
                                </button>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    暂无文档。请上传文件进行切块处理。
                </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- 隐藏元素用于存储允许的文件扩展名 -->
<div id="allowedExtensions" data-extensions="{{ allowed_extensions }}" style="display: none;"></div>
{% endblock %}

{% block extra_js %}
<script src="/static/js/chunklab_index.js"></script>
{% endblock %} 